<template>
  <div class="container">
    <div class="row mt-3">
      <div class="col-md-12">
        <h2 class="text-primary"><i class="fas fa-search"> Vulnerability Search</i></h2>
      </div>
    </div>
    <div class="row mt-3 border rounded shadow-sm" style="padding: 10px 10px 10px 0">
      <div class="col-md-12">
        <i class="fas fa-home"></i> Home&nbsp;&nbsp;/&nbsp;&nbsp;
        <i class="fas fa-search"></i> Intelligence Search&nbsp;&nbsp;/&nbsp;&nbsp;
        <i class="fas fa-dice-d6"></i> Vulnerability Search
      </div>
    </div>
    <div class="row mt-5 mb-5">
      <div class="col-md-9 offset-md-2">
        <div class="form-inline">
          <input type="text" class="form-control"
                 placeholder="please input the vulnerability name(cve-ID) you want to query..."
                 style="width: 70%;height: 50px;font-size: 18px"
                 v-model="vulName">
          <button class="btn btn-primary" style="width:100px;height: 50px" v-on:click="selectVul">Search</button>
        </div>
      </div>
      <div class="col-md-10 offset-1 mt-3" v-if="interests">
        Others you may be interested in:
        <span v-for="(vul,index) in sameVulNames" :key="index">
          {{vul}},&nbsp;
        </span>
      </div>
    </div>
    <structured-info v-show="panel1"/>
    <div class="row mt-5 mb-3 border rounded shadow-sm" v-show="panel2">
      <div class="col-md-12" style="padding-top: 10px; background-color: #dee2e6">
        <h3>
          <span>Relation Graph</span>
<!--          <button class="btn btn-primary" style="position: absolute;right:10px" @click="updateDataSet">Update</button>-->
        </h3>
      </div>
      <RelationGraph/>
    </div>
  </div>
</template>

<script>
import StructuredInfo from '../../components/entity-info/VulEntity'
import RelationGraph from '../../components/entity-info/RelationGraph'
import { reqVulDetails, reqWeakness } from '../../api/api-index'
import PubSub from 'pubsub-js'

export default {
  name: 'VulnerabilityInfo',
  components: {
    StructuredInfo,
    RelationGraph
  },
  data () {
    return {
      panel1: false,
      panel2: false,
      vulName: '',
      interests: false,
      sameVulNames: null
    }
  },
  methods: {
    selectVul () {
      const vulName = this.vulName.trim()
      reqVulDetails(vulName).then(response => {
        this.panel1 = true
        this.panel2 = true
        const nodes = response.tripleRelation.singleNodeList
        const edges = response.tripleRelation.singleRelationList
        const vulData = response.vulnerability
        PubSub.publish('relChartData', { nodes, edges })
        PubSub.publish('vulData', vulData)

        let weaknessNodeName = ''
        edges.forEach((item, index) => {
          if (item.relation === 'BelongsTo') {
            weaknessNodeName = item.target
          }
        })
        reqWeakness(weaknessNodeName).then(response2 => {
          const weaknessData = response2.weakness
          this.sameVulNames = response2.stringList
          this.interests = true
          PubSub.publish('weaknessData', weaknessData)
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
